<template>
	<div class="hh">
		<header>
			<p> 
				<span  class="iconfont" @click="goss($router)">&#xe697;</span>
				<span class="sh"><router-link to="/sortxiangqing">商品</router-link></span>
				<span class="slide">详情</span>
				<span class="hh-last">评价</span>
			</p>			
		</header>
		<div class="dy-img">
			<img src="/static/market-img/16480-2.jpg" />
			<img src="/static/market-img/16480-3.jpg" />
			<img src="/static/market-img/16480-4.jpg" />
		</div>
		<footer>
		<div class="footer-down">
			<div>
				<p class="line">&#xe606;</p>
				<p>在线客服</p>
			</div>
			<div class="eat">
				<p class="line">&#xe6aa;</p>
				<p>爱吃</p>
			</div>
			<div>
				<p class="line">&#xe698;</p>
				<p>购物车</p>
			</div>
			<div class="footer-r">
				加入购物车
			</div>
		</div>	
		
	</footer>
	</div>
</template>

<script>
	export default{
		methods:{
			goss(str){
				str.go(-1);
			}
		}
	}
</script>

<style scoped>
.hh {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: white;
    z-index: 99;
    overflow: auto;
}
.iconfont{
	font-family: 'iconfont';
	font-size: 1rem;
    color: #ff6900;
    margin-left: .-4rem;
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_i84syvtc5rti6bt9.eot');
  src: url('//at.alicdn.com/t/font_347964_i84syvtc5rti6bt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_i84syvtc5rti6bt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_i84syvtc5rti6bt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_i84syvtc5rti6bt9.svg#iconfont') format('svg');
}
header{
	height: 1.3rem;
	line-height: 1.3rem;
	background:white;
	position: fixed;
	top: 0;
	left:0;
	right: 0;
	z-index: 100;
}
header p{
	
    text-align: center;
    font-size: .5rem;
    display: flex;
	justify-content: space-around;
	text-align: center;
	border-bottom: 1px solid #DDDDDD;
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_t0eyzovtr1z6w29.eot');
  src: url('//at.alicdn.com/t/font_347964_t0eyzovtr1z6w29.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_t0eyzovtr1z6w29.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_t0eyzovtr1z6w29.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_t0eyzovtr1z6w29.svg#iconfont') format('svg');
}
.hh-last{
	margin-right: 2.5rem;
}
.slide{
	color: #FF6600;
	border-bottom: 5px solid #FF6600;
}

footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1.48rem;
		background:white;
		z-index: 99;
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_45gmv5rd0b0jatt9.eot');
  src: url('//at.alicdn.com/t/font_347964_45gmv5rd0b0jatt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_45gmv5rd0b0jatt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_45gmv5rd0b0jatt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_45gmv5rd0b0jatt9.svg#iconfont') format('svg');
}
.line{
	  font-family: 'iconfont';
	  font-size: .6rem;
}
.footer-down{
	width: 100%;
	display: flex;
	justify-content: space-between;
	text-align: center;
	align-items: center;
}
.footer-down div{
	width: 20%;
}
.footer-down .footer-r{
	width: 40%;
	height: 1.48rem;
	background: #f60;
	padding: 0;
	line-height: 1.48rem;
	color: white;
	font-size: .5rem;
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_hqkf8vsccbgo80k9.eot');
  src: url('//at.alicdn.com/t/font_347964_hqkf8vsccbgo80k9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_hqkf8vsccbgo80k9.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_hqkf8vsccbgo80k9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_hqkf8vsccbgo80k9.svg#iconfont') format('svg');
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.eot');
  src: url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.svg#iconfont') format('svg');
}
.eat{
	border-left:1px solid  #ddd;
	border-right:1px solid  #ddd;
	
}
.dy-img img{
	width: 100%;
	padding:0; border:0;margin:0;display:block;
}
.dy-img{
	margin-bottom: 1.38rem;
	
}
</style>